<template>
  <div class="content-view">

    <div class="table-head-tool">
      <Button type="primary" @click="showAddWarp">新增</Button>
    </div>
    <div class="table-body">
      <tables ref="tables" :columns="gridOption.columns" :value="gridOption.data">
      </tables>
    </div>

    <editModal ref="editModal" :columns="gridOption.columns" :rules="gridOption.rules">
    </editModal>
  </div>
</template>
<script>
import uiTool from '@/libs/uiTool'
import paramSetupServer from '@/api/system_high/paramSetupServer'

export default {
  name: 'tables_page',

  data() {
    return {
      gridOption: {
        addTitle: '新增',
        editRow: {},
        rules: {
          key: [{ required: true, message: '请填写键名称' }],
          value: [{ required: true, message: '请填写值' }],
        },
        columns: [
          { title: 'id', key: 'id', width: '80px', is_show_edit: 0 },
          { title: '键名称', key: 'key', disabled: false },
          { title: '值', key: 'value', type: 'textarea', isRow: true },
          { title: '备注', key: 'remark', type: 'textarea', isRow: true },

          {
            title: '操作',
            key: 'action',
            type: 'template',
            render: (h, params) => {
              let btns = [
                {
                  title: '修改',
                  type: 'primary',
                  click: () => {
                    this.showEditWarp(params.row)
                  },
                },
              ]

              return uiTool.getBtn(h, btns)
            },
          },
        ],
        data: [],
      },
    }
  },
  created() {
    this.init()
  },
  methods: {
    async init() {
      let res = await paramSetupServer.getAll()
      this.gridOption.data = res.data
    },

    async showAddWarp() {
      let col = this.gridOption.columns.find((p) => p.key === 'key')
      if (col) {
        col.disabled = false
      }

      this.$refs.editModal.addShow({}, async (row) => {
        await paramSetupServer.add(row)
        rootVue.$Message.success('新增成功！')
        this.init()
      })
    },
    async showEditWarp(row) {
      let col = this.gridOption.columns.find((p) => p.key === 'key')
      if (col) {
        col.disabled = true
      }

      this.gridOption.editRow = row
      this.$refs.editModal.editShow(row, async (newRow) => {
        await paramSetupServer.edit(newRow)
        rootVue.$Message.success('修改成功！')

        this.init()
      })
    },
    async delConfirm(row) {
      uiTool.delConfirm(async () => {
        await paramSetupServer.del(row)
        rootVue.$Message.success('删除成功！')
        this.init()
      })
    },

    exportExcel() {
      this.$refs.tables.exportCsv({
        filename: `table-${new Date().valueOf()}.csv`,
      })
    },
  },
}
</script>
